
body{
  padding:0;
  margin:0;
}

.container{

  min-width: 500px;
  max-width: 800px;
  min-height: 500px;
  margin:0 auto;
}

.container > header {
   /*border:1px solid transparent;*/
   padding:15px;
   border-radius: 20px 20px 0 0 ;
   background-color: #efefef;
}

.container > header hgroup {
  /*padding-top:1px;*/
  /* margin-left: auto;
  margin-right: auto; */
}

.container > header h1{
  /* align-items: center; */
  color: blue;
  text-align: center;
  letter-spacing: 5px;
  font:20pt;
  font-style: normal;
  font-weight: bold;
}

.container > header h2{
  text-align: center;
  /* color: #33eeee; */

}

.container > nav {
  background:linear-gradient(black,#66ccee);
}

@media (min-width:800px){
.container  .menu {
  display:none;
}

.container > nav > ul  li{
  list-style: none;
  display: inline-block;
  position: relative;
  }

  .container > nav > ul > li > ul {
     display:none;
     width: 80px;
     padding:0;
     margin:0;
     position: absolute;
     top: 30px;
     background:linear-gradient(to bottom,#66eecc,black);
  }

  .container > nav > ul > li > ul > li > ul {
    display:none;
    width: 80px;
    padding:0;
    margin:0px;
    position: absolute;
    top: 0px;
    left:80px;
    text-align: center;
    background:linear-gradient(to bottom,#99eecc,black);
  }

  .product-list > .product {

    display: inline-block;
    /* display:inline-flex ; */
    margin: 8px;
    text-align: center;
    width:80px;
    height:120px;
    border:1px solid #eee;
  }

  .product h4{
    margin:3px;
  }

  .product > img{
    width:70px;
    height: 60px;
  }

  .product > p {
    margin:3px;
    font-size:9pt;
    color: #666;
  }
}

@media (max-width:799px){

  .menu {
    display:block;
  }

  .container>nav>ul{
    padding-left:10px;
    display:none;
  }

  .container>nav>ul li {
    list-style: none;
    position: relative;
  }

  /* .container>nav>ul>li {
    list-style: none;
    position: relative;
  } */

  .container>nav ul.open {
     display:block;
  }

  .container > nav > ul > li > ul {
     display:none;
     width: 80px;
     padding:0;
     margin:0;
     position: absolute;
     top: -55px;
     left:50px;
     background:linear-gradient(to bottom,#66eecc,black);
  }

  .container > nav > ul > li > ul > li > ul {
    display:none;
    width: 80px;
    padding:0;
    margin:0px;
    position: absolute;
    top: -30px;
    left:80px;
    text-align: center;
    background:linear-gradient(to bottom,#99eecc,black);
  }

  .product-list > .product {

    /* display: inline-block; */
    display: block;
    /* display:inline-flex ; */
    margin: 8px;
    text-align: center;
    min-width:80px;
    min-height:120px;
    border:1px solid #eee;
    overflow: hidden;
  }

  .product h4{
    margin:3px;
    font-size:25pt;
  }

  .product > img{
    width:200px;
    height: 170px;
  }

  .product > p {
    margin:3px;
    font-size:20pt;
    color: #666;
  }


}


.container > nav > ul > li:hover > ul {
    display:block;
}

.container > nav > ul > li:hover > ul > li:hover > ul {
    display:block;
}

/* .container > nav > ul > li > ul {
   display:none;
   width: 80px;
   padding:0;
   margin:0;
   position: absolute;
   top: 30px;
   background:linear-gradient(to bottom,#66eecc,black);
} */

.container > nav > ul > li > ul > li {
  list-style: none;
  margin:0px;
  padding:0px;
}

/* .container > nav > ul > li > ul > li > ul {
  display:none;
  width: 80px;
  padding:0;
  margin:0px;
  position: absolute;
  top: 0px;
  left:80px;
  text-align: center;
  background:linear-gradient(to bottom,#99eecc,black);
} */

.container > nav > ul > li > ul > li > ul > li {
  list-style: none;
  margin:0px;
  padding:0px;
}
.container > nav  a {
   text-decoration: none; /* 清除掉 a 的下划线 */
   line-height: 30px;
   padding: 10px;
}

a:link , a:visited , a:active {
   color: #fff;

}

a:hover {
   font-size: 13pt;
}


.main {
  border:1px solid #eee;
  min-height: 300px;
}

/* .product-list > .product {

  display: inline-block;
  display:inline-flex ;
  margin: 8px;
  text-align: center;
  width:80px;
  height:120px;
  border:1px solid #eee;
} */

/* .product h4{
  margin:3px;
}

.product > img{
  width:70px;
  height: 60px;
}

.product > p {
  margin:3px;
  font-size:9pt;
  color: #666;
} */
